<template>
  <el-row>
    <el-form-item label="控件标题">
      <el-input v-model="activeData.__config__.label" placeholder="请输入控件标题" />
    </el-form-item>
    <el-divider>节点配置</el-divider>
    <draggable :list="list" :animation="340" group="selectItem"
      handle=".option-drag">
      <div v-for="(item, index) in activeData.__config__.children" :key="index" class="select-item">
        <div class="select-line-icon option-drag">
          <i class="icon-ym icon-ym-darg" />
        </div>
        <el-input v-model="item.title" placeholder="步骤名称" size="small" @blur="changeName(index)"/>
        <div class="close-btn select-line-icon" @click="delItem(index,item)">
          <i class="el-icon-remove-outline" />
        </div>
      </div>
    </draggable>
    <div style="margin-left: 29px;">
      <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text"
        @click="addItem">
        添加节点
      </el-button>
    </div>
    <el-divider>流程功能配置</el-divider>
    <el-form-item label="允许跳节点">
      <el-switch v-model="activeData.__config__.allowSkip" />
    </el-form-item>
    <el-divider>按钮配置</el-divider>
    <div class="btn-item">
      <el-checkbox v-model="activeData.__config__.showBtnLog" label="流程日志"></el-checkbox>
      <el-input v-model="activeData.__config__.btnLog"  placeholder="请输入" />
    </div>
    <div class="btn-item">
      <el-checkbox v-model="activeData.__config__.showBtnNext" label="推进流程"></el-checkbox>
      <el-input v-model="activeData.__config__.btnNext"  placeholder="请输入" />
    </div>
    <div class="btn-item">
      <el-checkbox v-model="activeData.__config__.showBtnStop" label="终止业务"></el-checkbox>
      <el-input v-model="activeData.__config__.btnStop"  placeholder="请输入" />
    </div>
    <div class="btn-item">
      <el-checkbox v-model="activeData.__config__.showBtnRestart" label="重启业务"></el-checkbox>
      <el-input v-model="activeData.__config__.btnRestart"  placeholder="请输入" />
    </div>
    <el-form-item label="显示标题">
      <el-switch v-model="activeData.__config__.showTitle" />
    </el-form-item>
     <el-form-item label="是否隐藏">
      <el-switch v-model="activeData.__config__.noShow" />
    </el-form-item>
  </el-row>
</template>
<script>
// by jdeng 新增文件
import { ListStage,CreateStage } from '@/api/workFlow/FlowStage'
import draggable from 'vuedraggable'
export default {
  props: ['activeData'],
  components: { draggable },
  data() {
    return {
      currModelId:this.$store.state.generator.curr_model_id,
      list:this.activeData.__config__.children,
      noWatchList:true,
      isModelSetted:(this.activeData.__vModel__?true:false),
      isInit:true,
      flowStageModels:[]
    }
  },
  created() { 
    // debugger
    
  },
  mounted(){
    if(this.activeData.isInit){
      return
    }
    if(!this.currModelId){
      this.initSteps(3)
    }else{
      this.listStage()
    }
    this.activeData.isInit = true
    
  },
  watch: {
    'list':{
      handler: function(newVal, oldVal) {
          // console.log('==='+JSON.stringify(newVal))
          if(!this.noWatchList&&!this.isInit){
            this.activeData.__config__.children = this.list 
            this.submitStage(true)
          }
          this.noWatchList = false
      },
      // deep: true,
      immediate: true
    },
    'activeData.__vModel__':{
      handler: function(newVal, oldVal) {
          console.log('==='+newVal+";"+oldVal)
          if(!this.isModelSetted||oldVal){
            this.noWatchList = true
            this.submitStage()
          }
      },
      immediate: true
    }
  },
  methods: {
    listStage() {
      if(this.activeData.__config__.children.length>1){
        return
      }
      ListStage(this.currModelId).then(res => {
        this.flowStageModels = res.data
        if(this.flowStageModels!=null&&this.flowStageModels.length>0){
          let list = []
          this.flowStageModels.forEach((stage)=>{
            let item = {
                title: stage.stageName,
                id:stage.id,
                __config__: {
                  children: []
                }
              }
              list.push(item)
         })
         this.isInit = true;
         this.activeData.__config__.children = list
         this.list = list
        }else{
          this.initSteps(3)
        }
      })
    },
    initSteps(stepNum){
      this.flowStageModels = []
      let list = []
      for(let i=0;i<stepNum;i++){
        let item = {
          title: '步骤'+(i+1),
          id:this.hlsz.guid(),
          __config__: {
            children: []
          }
        }
        list.push(item)
      }
      this.isInit = true;
      this.activeData.__config__.children = list
      this.submitStage()
    },
   
    addItem() {
      this.activeData.__config__.children.push({
        title: '步骤',
        id:this.hlsz.guid(),
        __config__: {
          children: []
        }
      })
      this.submitStage()
    },
    delItem(index, item) {
      let list = this.activeData.__config__.children
      let length = list.length
      if (length < 2) {
        this.$message({
          message: '最后一项不能删除',
          type: 'warning'
        });
        return
      }
      this.$confirm('删除后不能撤销，确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.activeData.__config__.active === item.name) {
          let nextTab = list[index + 1] || list[index - 1];
          if (nextTab) this.activeData.__config__.active = nextTab.name;
        }
        this.activeData.__config__.children.splice(index, 1)
        
        this.submitStage()

      }).catch(() => { });
    },
    changeName(indx){
      debugger
      let title = this.activeData.__config__.children[indx].title
      let old = this.flowStageModels[indx]?this.flowStageModels[indx].stageName:null
      if(title!=old){
        this.submitStage()
      }
     
    },
    refreshList(){
      this.noWatchList = true
      this.list = this.activeData.__config__.children
    },
    submitStage(noRefreshList){
      debugger
      if(!this.activeData.__vModel__){
        console.error('控件为空不能提交')
        return
      }
      let list = this.activeData.__config__.children
      let length = list.length
      if (length < 2) {
        this.$message({
          message: '步数不能小于2',
          type: 'warning'
        });
        return
      }
      this.isInit = false
      
      !noRefreshList&&this.refreshList()
      let field = '_'//this.activeData.__vModel__
      this.flowStageModels = []
      let prevId = ''
      let nextId = ''
      list.forEach((item,i)=>{
        nextId = i<(length-1)?(list[i+1].id):''
        let stage = {
          modelId:this.currModelId,
          field,
          id:item.id,
          stageName:item.title,
          sortCode:i,
          prevId,
          nextId
        }
        prevId = item.id
       
        this.flowStageModels.push(stage)
      })
      let flowStageForm = {
        modelId:this.currModelId,
        flowStageModels:this.flowStageModels
      }
      CreateStage(this.currModelId,flowStageForm)
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-item {
  display: flex;
  align-items: center;
  border: 1px dashed #fff;
  box-sizing: border-box;
  margin:10px;
  .el-input {
    margin-left: 10px;
    width: 50%;
  }

}
</style>